<template>
    <maskLayer v-model="visible" center append-to-body>
        <div class="content">
            <div class="tip_title">
                <span>{{ text.tip }}</span>
                <img @click="closeVideo" src="../assets/home/14.png" alt="">
            </div>
            <div class="tip_text" v-html="text.text"></div>
            <div class="tip_btn">
                <div class="tip_btn_1" @click="closeVideo">{{ text.cancelText }}</div>
                <div class="tip_btn_2" @click="confirm">{{ text.confirmText }}</div>
            </div>
        </div>
    </maskLayer>
</template>

<script setup name="modalText">
import maskLayer from "@/components/maskLayer.vue";
import { ref } from "vue";

let text = defineProps({
    text: {
        type: String,
        default: ""
    },
    tip: {
        type: String,
        default: "提示"
    },
    confirmText: {
        type: String,
        default: "确定"
    },
    cancelText: {
        type: String,
        default: "取消"
    }
})
const emits = defineEmits(["confirm"])

let visible = ref(false);
function openModal() {
    visible.value = true;
}
function closeVideo() {
    visible.value = false;
}
function confirm() {
    visible.value = false;
    // 确定后执行的操作
    emits("confirm");
}

defineExpose({
    openModal
})

</script>

<style lang="scss" scoped>
    .content {
        background: #fff;
        width: 190px;
        padding: 16px;
        .tip_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 9px;
            font-weight: bold;
            span {
                font-weight: bold;
            }
            img {
                width: 8px;
                height: 8px;
                cursor: pointer;
            }
        }
        .tip_text {
            font-size: 8px;
            margin: 12px 0 22px;
        }
        .tip_btn {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .tip_btn_1 {
                width: 52px;
                height: 18px;
                background: #F6F7F9;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 8px;
                cursor: pointer;
            }
            .tip_btn_2 {
                width: 52px;
                height: 18px;
                background: #1F52AE;
                color: #fff;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 8px;
                cursor: pointer;
                margin-left: 12px;
            }
        }
    }
</style>